var dom = document.getElementById('data_right_top_bottom');
var myChart = echarts.init(dom, 'dark', {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

option = {
	tooltip: {
		trigger: 'item'
	  },
	backgroundColor:'',
    color: [ "#0476c7", "#0a45ac", "#1264ab", "#4a93cd"],
    grid: {
        left: -100,
        top: 50,
        bottom: 10,
        right: 10,
        containLabel: true
    },
    polar: {},
    angleAxis: {
        interval: 1,
        type: 'category',
        data: [],
        z: 10,
        axisLine: {
            show: false,
            lineStyle: {
                color: "#0B4A6B",
                width: 1,
                type: "solid"
            },
        },
        axisLabel: {
            interval: 0,
            show: true,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 16
        },
    },
    radiusAxis: {
        min: 40,
        max: 120,
        interval: 20,
        axisLine: {
            show: false,
            lineStyle: {
                color: "#0B3E5E",
                width: 1,
                type: "solid"
            },
        },
        axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 16
        },
        splitLine: {
            lineStyle: {
                color: "#0B3E5E",
                width: 0,
                type: "solid"
            }
        }
    },
    calculable: true,
    series: [{
        stack: 'a',
        type: 'pie',
        radius: ['20%', '40%'],
        roseType: 'area',
        zlevel:10,
        label: {
            normal: {
                show: true,
				formatter(v){return v.name+"\n"+v.value+"%"},
                textStyle: {
                    fontSize: 12,
                },
                position: 'outside'
            },
            emphasis: {
                show: true
            }
        },
        labelLine: {
            normal: {
                show: true,
                length: 20,
                length2: 30
            },
            emphasis: {
                show: false
            }
        },
        data: [{
				value: 32,
				name: '大港分公司'
			},
			{
				value: 40,
				name: '金港分公司'
			},
			{
				value: 10,
				name: '东港分公司'
			},
			{
				value: 15,
				name: '镇江港务集团'
			}
        ]
    }, ]
}

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);